<template>
  <div class="app-container">
    <el-container>
      <el-aside width="200px">
        <el-menu :default-active="activeTable.name" @select="selectTable">
          <el-menu-item v-for="(item, index) of tables" :index="item.name" :key="'table' + index">
            <span slot="title">{{ item.title }}</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-main v-if="activeTable.name" style="padding-top:0;">
        <aside>
          <el-form inline class="flex form">
            <el-form-item>
              <el-select v-model="query.name">
                <el-option label="请选择查询条件" value="" />
                <el-option v-for="(item, index) of activeTable.columns" :key="'table-key-' + index" :label="item.title" :value="item.name" />
              </el-select>
            </el-form-item>
            <el-form-item style="width: 80px;">
              <el-select v-model="query.relation" placeholder="关系">
                <el-option v-for="(item, index) of relations" :key="'relation-' + index" :label="item.title" :value="item.name" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-input />
            </el-form-item>
            <el-form-item class="flex-1"><el-button type="primary" icon="el-icon-search">搜索</el-button></el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-plus" @click="editData(-1)">新增</el-button>
            </el-form-item>
          </el-form>
        </aside>
        <el-table :data="tableData.data">
          <el-table-column v-for="(item, index) of activeTable.columns" :key="'th-' + index" :prop="item.name" :label="item.title">
            <template slot-scope="{row}">
              <span v-show="false">{{isImg = (/.(jpg|png|jpeg)$/).test(row[item.name])}}</span>
              <img v-if="isImg" :src="row[item.name]" style="width:50px;" />
              <span v-else-if="item.type !== 'text'">{{ row[item.name] }}</span>
              <span v-else>预览</span>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="primary" size="mini" icon="el-icon-edit" @click="editData(scope.$index)">编辑</el-button>
              <el-button type="danger" size="mini" icon="el-icon-delete" @click="deleteData(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-main>
    </el-container>

    <!--添加数据-->
    <add-data ref="dataDialog" :on-save="saveData" />
  </div>
</template>

<script>
import table from '@/api/table'
import tableData from '@/api/table-data'
import AddData from '@/views/db-data/components/AddData'
export default {
  name: 'DataIndex',
  components: { AddData },
  data() {
    return {
      relations: [{ name: '=', title: '等于' }, { name: 'eq', title: '大于' }],
      query: {
        name: '',
        relation: '',
        value: ''
      },
      activeTable: {
        name: '',
        columns: []
      },
      tableData: {
        current_page: 0,
        data: []
      },
      tables: []
    }
  },
  created() {
    this.getTables()
  },
  methods: {
    selectTable(index) {
      for (const table of this.tables) {
        if (table.name === index) {
          if (table.name === this.activeTable.name) {
            break
          }
          this.activeTable = table
          if (table.columns.length === 0) {
            // 获取字段
            this.getColumn()
          }
          this.tableData.current_page = 0
          this.tableData.data = []
          this.getData()
        }
      }
    },
    getTables() {
      table.search().then(res => {
        const tables = res.data
        for (const table of tables) {
          table.columns = []
        }
        this.tables = tables
      })
    },
    getColumn() {
      const id = this.activeTable.id
      table.detail(id).then(res => {
        this.activeTable.columns = res.data
        // 将字段缓存
        for (const i in this.tables) {
          if (this.tables[i].id === id) {
            this.tables[i].columns = res.data
          }
        }
      }).catch(() => {})
    },
    getData() {
      tableData.search(this.activeTable.name, this.tableData.current_page).then(res => {
        console.log(res)
        if (res.data.data.length) {
          this.tableData.data = this.tableData.data.concat(res.data.data)
        }
      }).catch(() => {})
    },
    editData(index) {
      const data = index >= 0 ? this.tableData.data[index] : {}
      this.$refs.dataDialog.open(this.activeTable.columns, data)
    },
    saveData(data) {
      if (data.id && data.id > 0) {
        // 修改
        tableData.update(this.activeTable.name, data.id, data).then(res => {
          for (const i in this.tableData.data) {
            if (this.tableData.data[i].id === data.id) {
              this.tableData.data[i] = data
              break
            }
          }
        })
      } else {
        // 新增
        tableData.create(this.activeTable.name, data).then(res => {
          this.tableData.data.splice(0, 0, res.data)
        })
      }
    },
    deleteData(id) {
      this.$confirm('确定删除吗').then(res => {
        tableData.delete(this.activeTable.name, id).then(res => {
          this.getData()
        }).catch(() => {})
      }).catch(() => {})
    }
  }
}
</script>

<style scoped lang="scss">
.form .el-form-item{
  margin-bottom: 0;
}
</style>
